<template>
  <div class="lfs">
    <header>
      <div class="header-area">
        <el-button type="primary">新增</el-button>
        <el-button type="primary">刷新</el-button>
        <el-button type="primary">批量删除</el-button>
        <el-button type="primary">导入</el-button>
        <el-button type="primary">读卡</el-button>
      </div>
      <div>
        <el-input
          v-model="input2"
          class="w-50 m-2"
          placeholder="Please Input"
          :suffix-icon="Search"
        />
      </div>
    </header>

    <article>
      <el-table
        ref="multipleTableRef"
        :data="tableData"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        max-height="640"
      >
        <el-table-column type="selection" width="55" />

        <el-table-column label="No" width="60">
          <template #default="scope">{{ scope.row.No }}</template>
        </el-table-column>
        <el-table-column label="cardNum" width="120">
          <template #default="scope">{{ scope.row.cardNum }}</template>
        </el-table-column>
        <el-table-column label="type" width="120">
          <template #default="scope">{{ scope.row.type }}</template>
        </el-table-column>

        <el-table-column label="statu" width="120">
          <template #default="scope">{{ scope.row.statu }}</template>
        </el-table-column>

        <el-table-column label="carNo" width="120">
          <template #default="scope">{{ scope.row.carNo }}</template>
        </el-table-column>

        <el-table-column label="carOwnerName" width="160">
          <template #default="scope">{{ scope.row.carOwnerName }}</template>
        </el-table-column>

        <el-table-column label="phone" width="120">
          <template #default="scope">{{ scope.row.phone }}</template>
        </el-table-column>

        <el-table-column label="money" width="120">
          <template #default="scope">{{ scope.row.money }}</template>
        </el-table-column>

        <el-table-column label="Operations"  width="600">
          <template #default="scope">
            <el-button
              size="small"
               type="success"
              @click="handleActive(scope.$index, scope.row)"
              >active</el-button
            >
            <el-button
              size="small"
              type="primary"
              @click="handleChange(scope.$index, scope.row)"
              >change</el-button
            >

            <el-button
              size="small"
              type="success"
              @click="handleUnsubscribe(scope.$index, scope.row)"
              >unsubscribe</el-button
            >

            <el-button
              size="small"
              type="primary"
              @click="handleSaveMoney(scope.$index, scope.row)"
              >saveMoney</el-button
            >
            <el-button
              size="small"
              type="success"
              @click="handleLoss(scope.$index, scope.row)"
              >report the loss</el-button
            >
          </template>
        </el-table-column>
        <!-- show-overflow-tooltip：換行顯示 -->
        <!-- <el-table-column
          property="address"
          label="Address"
          show-overflow-tooltip
        /> -->
      </el-table>

       <!-- <el-pagination
      v-model:currentPage="currentPage4"
      v-model:page-size="pageSize4"
      :page-sizes="[100, 200, 300, 400]"
      :small="small"
      :disabled="disabled"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    /> -->


    <pageComponents :needTotal="sendtotal" 
      @sendCurpageNum="CurpageNumFn"
       @everyPageCount="everyPageCountFn"
     ></pageComponents>

    </article>
  </div>
</template>

<script>
import { reactive, toRefs, ref } from "vue";
import { Search } from "@element-plus/icons-vue";
import { ElTable } from "element-plus";
import   pageComponents from "../components/pageComponents.vue"

export default {
  components: {
    Search,
    ElTable,
    pageComponents
  },
  setup() {
    const state = reactive({
      count: 0,
      input2:"输入点什么",
      background:true, //是否为分页按钮添加背景色
      disabled:false, //是否禁用分页,
      small:false,  //是否使用小型分页样式
      currentPage4:4, //当前页数，支持 v-model 双向绑定
      pageSize4:100,//每页尺寸

      sendtotal:300, //总条数
     
      tableData: [
        {
          No: 1,
          cardNum: 1018,
          type: "臨時卡",
          statu: "未激活",
          carNo: "56568877",
          carOwnerName: "張三",
          phone: "15778998745",
          money: 998,
        }, {
          No: 1,
          cardNum: 1018,
          type: "臨時卡",
          statu: "未激活",
          carNo: "56568877",
          carOwnerName: "張三",
          phone: "15778998745",
          money: 998,
        }, {
          No: 1,
          cardNum: 1018,
          type: "臨時卡",
          statu: "未激活",
          carNo: "56568877",
          carOwnerName: "張三",
          phone: "15778998745",
          money: 998,
        }, {
          No: 1,
          cardNum: 1018,
          type: "臨時卡",
          statu: "未激活",
          carNo: "56568877",
          carOwnerName: "張三",
          phone: "15778998745",
          money: 998,
        }, {
          No: 1,
          cardNum: 1018,
          type: "臨時卡",
          statu: "未激活",
          carNo: "56568877",
          carOwnerName: "張三",
          phone: "15778998745",
          money: 998,
        }, {
          No: 1,
          cardNum: 1018,
          type: "臨時卡",
          statu: "未激活",
          carNo: "56568877",
          carOwnerName: "張三",
          phone: "15778998745",
          money: 998,
        }, {
          No: 1,
          cardNum: 1018,
          type: "臨時卡",
          statu: "未激活",
          carNo: "56568877",
          carOwnerName: "張三",
          phone: "15778998745",
          money: 998,
        }, {
          No: 1,
          cardNum: 1018,
          type: "臨時卡",
          statu: "未激活",
          carNo: "56568877",
          carOwnerName: "張三",
          phone: "15778998745",
          money: 998,
        }, {
          No: 1,
          cardNum: 1018,
          type: "臨時卡",
          statu: "未激活",
          carNo: "56568877",
          carOwnerName: "張三",
          phone: "15778998745",
          money: 998,
        }, {
          No: 1,
          cardNum: 1018,
          type: "臨時卡",
          statu: "未激活",
          carNo: "56568877",
          carOwnerName: "張三",
          phone: "15778998745",
          money: 998,
        }, {
          No: 1,
          cardNum: 1018,
          type: "臨時卡",
          statu: "未激活",
          carNo: "56568877",
          carOwnerName: "張三",
          phone: "15778998745",
          money: 998,
        }, {
          No: 1,
          cardNum: 1018,
          type: "臨時卡",
          statu: "未激活",
          carNo: "56568877",
          carOwnerName: "張三",
          phone: "15778998745",
          money: 998,
        }, {
          No: 1,
          cardNum: 1018,
          type: "臨時卡",
          statu: "未激活",
          carNo: "56568877",
          carOwnerName: "張三",
          phone: "15778998745",
          money: 998,
        }, {
          No: 1,
          cardNum: 1018,
          type: "臨時卡",
          statu: "未激活",
          carNo: "56568877",
          carOwnerName: "張三",
          phone: "15778998745",
          money: 998,
        }, {
          No: 1,
          cardNum: 1018,
          type: "臨時卡",
          statu: "未激活",
          carNo: "56568877",
          carOwnerName: "張三",
          phone: "15778998745",
          money: 998,
        }, {
          No: 1,
          cardNum: 1018,
          type: "臨時卡",
          statu: "未激活",
          carNo: "56568877",
          carOwnerName: "張三",
          phone: "15778998745",
          money: 998,
        }, {
          No: 1,
          cardNum: 1018,
          type: "臨時卡",
          statu: "未激活",
          carNo: "56568877",
          carOwnerName: "張三",
          phone: "15778998745",
          money: 998,
        }, {
          No: 1,
          cardNum: 1018,
          type: "臨時卡",
          statu: "未激活",
          carNo: "56568877",
          carOwnerName: "張三",
          phone: "15778998745",
          money: 998,
        }, {
          No: 1,
          cardNum: 1018,
          type: "臨時卡",
          statu: "未激活",
          carNo: "56568877",
          carOwnerName: "張三",
          phone: "15778998745",
          money: 998,
        }, {
          No: 1,
          cardNum: 1018,
          type: "臨時卡",
          statu: "未激活",
          carNo: "56568877",
          carOwnerName: "張三",
          phone: "15778998745",
          money: 998,
        },
      ],
    });

    // 被選中的select
    const handleSelectionChange = (val) => {
      console.log(val, "點擊事件");
    };

    const handleActive = (index, row) => {
      console.log(index, row, "激活");
    };

    const handleChange = (index, row) => {
      console.log(index, row, "換卡");
    };
    const handleUnsubscribe = (index, row) => {
      console.log(index, row, "退訂");
    };
    const handleSaveMoney = (index, row) => {
      console.log(index, row, "充值");
    };
    const handleLoss = (index, row) => {
      console.log(index, row, "挂失");
    };

 const handleSizeChange = (val) => {
  console.log(`${val} items per page`)
}

const handleCurrentChange = (val) => {
  console.log(`current page: ${val}`)
}


// 组件封装版本
// 儿子传递过来的 参数 
  function CurpageNumFn(params){
    console.log(params,"当前页");
  }
 function everyPageCountFn(params){
    console.log(params,"每页多少条");
  }


    return {
      Search,
      ElTable,
      handleSelectionChange,
      handleActive,
      handleChange,
      handleUnsubscribe,
      handleSaveMoney,
      handleLoss,
      handleSizeChange,
      handleCurrentChange,
      CurpageNumFn,
      everyPageCountFn,
      ...toRefs(state),
      
    };
  },
};
</script>

<style lang="scss" scoped>
.lfs {
  height: 80vh;
  background: #fff;
  box-sizing: border-box;
  padding: 16px;
}

header {
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 0 16px;
  margin: 10px auto;
}

::v-deep .header-area .el-button {
  background: #00bdb5;
  border: 1px solid #00bdb5;
  width: 80px;
}

.el-pagination{
  margin-top: 16px;
}
</style>
